"use client";

import * as React from "react";

import { type DropdownMenuProps } from "@radix-ui/react-dropdown-menu";
import { type TElement } from "platejs";

import { DropdownMenuItemIndicator } from "@radix-ui/react-dropdown-menu";
import {
  CheckIcon,
  ChevronRightIcon,
  Columns3Icon,
  FileCodeIcon,
  Heading1Icon,
  Heading2Icon,
  Heading3Icon,
  Heading4Icon,
  Heading5Icon,
  Heading6Icon,
  ListIcon,
  ListOrderedIcon,
  PilcrowIcon,
  QuoteIcon,
  SquareIcon,
} from "lucide-react";
import { KEYS } from "platejs";
import { useEditorRef, useSelectionFragmentProp } from "platejs/react";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/components/plate/ui/dropdown-menu";
import {
  getBlockType,
  setBlockType,
} from "@/components/plate/utils/transforms";

import { ToolbarButton, ToolbarMenuGroup } from "./toolbar";

const turnIntoItems = [
  {
    icon: &lt;PilcrowIcon /&gt;,
    keywords: ["paragraph"],
    label: "Text",
    value: KEYS.p,
  },
  {
    icon: &lt;Heading1Icon /&gt;,
    keywords: ["title", "h1"],
    label: "Heading 1",
    value: "h1",
  },
  {
    icon: &lt;Heading2Icon /&gt;,
    keywords: ["subtitle", "h2"],
    label: "Heading 2",
    value: "h2",
  },
  {
    icon: &lt;Heading3Icon /&gt;,
    keywords: ["subtitle", "h3"],
    label: "Heading 3",
    value: "h3",
  },
  {
    icon: &lt;Heading4Icon /&gt;,
    keywords: ["subtitle", "h4"],
    label: "Heading 4",
    value: "h4",
  },
  {
    icon: &lt;Heading5Icon /&gt;,
    keywords: ["subtitle", "h5"],
    label: "Heading 5",
    value: "h5",
  },
  {
    icon: &lt;Heading6Icon /&gt;,
    keywords: ["subtitle", "h6"],
    label: "Heading 6",
    value: "h6",
  },
  {
    icon: &lt;ListIcon /&gt;,
    keywords: ["unordered", "ul", "-"],
    label: "Bulleted list",
    value: KEYS.ul,
  },
  {
    icon: &lt;ListOrderedIcon /&gt;,
    keywords: ["ordered", "ol", "1"],
    label: "Numbered list",
    value: KEYS.ol,
  },
  {
    icon: &lt;SquareIcon /&gt;,
    keywords: ["checklist", "task", "checkbox", "[]"],
    label: "To-do list",
    value: KEYS.listTodo,
  },
  {
    icon: &lt;ChevronRightIcon /&gt;,
    keywords: ["collapsible", "expandable"],
    label: "Toggle list",
    value: KEYS.toggle,
  },
  {
    icon: &lt;FileCodeIcon /&gt;,
    keywords: ["```"],
    label: "Code",
    value: KEYS.codeBlock,
  },
  {
    icon: &lt;QuoteIcon /&gt;,
    keywords: ["citation", "blockquote", "&gt;"],
    label: "Quote",
    value: KEYS.blockquote,
  },
  {
    icon: &lt;Columns3Icon /&gt;,
    label: "3 columns",
    value: "action_three_columns",
  },
];

export function TurnIntoToolbarButton(props: DropdownMenuProps) {
  const editor = useEditorRef();
  const [open, setOpen] = React.useState(false);

  const value = useSelectionFragmentProp({
    defaultValue: KEYS.p,
    getProp: (node) =&gt; getBlockType(node as TElement),
  });
  const selectedItem = React.useMemo(
    () =&gt;
      turnIntoItems.find((item) =&gt; item.value === (value ?? KEYS.p)) ??
      turnIntoItems[0],
    [value],
  );

  return (
    &lt;DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}&gt;
      &lt;DropdownMenuTrigger asChild&gt;
        &lt;ToolbarButton
          className="min-w-[125px]"
          pressed={open}
          tooltip="Turn into"
          isDropdown
        &gt;
          {selectedItem!.label}
        &lt;/ToolbarButton&gt;
      &lt;/DropdownMenuTrigger&gt;

      &lt;DropdownMenuContent
        className="ignore-click-outside/toolbar min-w-0"
        onCloseAutoFocus={(e) =&gt; {
          e.preventDefault();
          editor.tf.focus();
        }}
        align="start"
      &gt;
        &lt;ToolbarMenuGroup
          value={value}
          onValueChange={(type) =&gt; {
            setBlockType(editor, type);
          }}
          label="Turn into"
        &gt;
          {turnIntoItems.map(({ icon, label, value: itemValue }) =&gt; (
            &lt;DropdownMenuRadioItem
              key={itemValue}
              className="*:first:[span]:hidden min-w-[180px] pl-2"
              value={itemValue}
            &gt;
              <span>
                &lt;DropdownMenuItemIndicator&gt;
                  &lt;CheckIcon /&gt;
                &lt;/DropdownMenuItemIndicator&gt;
              </span>
              {icon}
              {label}
            &lt;/DropdownMenuRadioItem&gt;
          ))}
        &lt;/ToolbarMenuGroup&gt;
      &lt;/DropdownMenuContent&gt;
    &lt;/DropdownMenu&gt;
  );
}
